<template>
  <div>
    <el-header>
      <BlogHeader :active-index="'2'"></BlogHeader>
    </el-header>

    <el-form :model="form" label-width="80px" class="main">
      <el-form-item label="标题">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="图片">
        <img v-if="image" :src="image" class="avatar">
        <input name="avatar" type="file" @change="imgSubmit"></input>
      </el-form-item>
      <div class="toolbar">
        <el-button-group>
          <el-button size="mini" @click="addContent('****')">加粗</el-button>
          <el-button size="mini" @click="addContent('----------')">分割</el-button>
          <el-button size="mini" @click="addContent('#')">标题</el-button>
          <el-button size="mini" @click="addContent('``')">文本</el-button>
          <el-button size="mini" @click="addContent('``````')">代码</el-button>
          <el-button size="mini" @click="addContent('*')">无序列表</el-button>
          <el-button size="mini" @click="addContent('1. ')">有序列表</el-button>
        </el-button-group>
      </div>

      <el-form-item label="文章">
        <BlogMarkdown :text="this.form.content"
                      @input="msg => this.form.content = msg"></BlogMarkdown>
        <el-button round style="margin-top: 20px" icon="el-icon-edit" @click="onSubmit">发表</el-button>
      </el-form-item>



  </el-form>
  </div>




</template>

<script>
import BlogHeader from "../components/BlogHeader";
import {postBlog, postImg} from "../api/api";
import BlogMarkdown from "../components/BlogMarkdown";
const token = localStorage.getItem('token')
// import authorization from '@/utils/authorization'
export default {
name: "ArticleCreate",
  components: {BlogMarkdown, BlogHeader},

  mounted() {
    this.username = localStorage.getItem('username')
  },

  data() {
    return({
      form: {
        title: '',
        content: '',
      },
      username: '',
      image: '',
      imagePath: '',
    })
  },

  methods: {
    imgSubmit(e) {
      if(!this.username)
      {
        alert('请登录！');
        setTimeout(() => {
          this.$router.push({name: 'Login'});
        }, 500)
      }
      else
      {

        let formData = new FormData(), file = e.target.files[0]
        formData.append('singleFile', file)
        let r = new FileReader()
        r.readAsDataURL(file, 'UTF-8')
        r.onload = () => {
          this.image = r.result
        }

        postImg(formData)
        .then(response => {
          if(response.status >= 200 && response.status < 300)
          {
            alert("图片上传成功")
            this.imagePath = response.data.data.filename
          }
        })
      }
    },

    onSubmit() {
      if(!this.username)
      {
        alert('请登录！');
        setTimeout(() => {
          this.$router.push({name: 'Login'});
        }, 500)
      }
      else
      {
        postBlog(this.username, this.form.title, this.imagePath, this.form.content, token)
          .then(response => {
            if(response.status >= 200 && response.status < 300) {
              alert("发表成功!")
              setTimeout(() => {
                console.log(response)
                this.$router.push("/article/" + response.data.data.id)
              }, 500)

            }
          })
      }
    },
    addContent(txt) {
      this.form.content = this.form.content + txt
      console.log(this.form.content)
    }
  }

}
</script>

<style scoped>

.main {
  font: 13px Small;
  padding-right: 4em;
  margin-top: 3rem;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  text-align: center;
  background-color: white;
}

.avatar {
  height: 178px;
  width: 178px;
  display: block;
}

.toolbar {
  padding-left: 9em;
  padding-right: 9em;
  padding-bottom: 2em;
}

</style>
